<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
    <style>
        #canvas{
            border:1px solid red;
        }
        img{
            display: none;
        }
    </style>
</head>
<body>
    <img src="../images/puke/3_1.jpg" alt="">
    <canvas id="canvas" width="800" height="500"></canvas>
    <script>
        // 获取画布
        let canvas = document.getElementById("canvas");
        // 获取画笔
        let ctx = canvas.getContext("2d");
        let imgs = document.querySelectorAll("img");

        // 修改画笔绘制线条的颜色
        ctx.strokeStyle = "red";
        // 修改画笔填充图形的颜色
        ctx.fillStyle = "green";
        // 颜色的宽度
        ctx.lineWidth = 10;
        // 线条两端末尾样式，round为圆形线冒
        // ctx.lineCap = "round";
        // 移动画笔
        ctx.moveTo(10,10);
        // 准备绘制直线
        ctx.lineTo(100,10);
        ctx.lineTo(55,100);
        // ctx.lineTo(10,10);
        // 闭合路径
        ctx.closePath();
        // 绘制线条
        // ctx.stroke();
        // 填充图形
        ctx.fill();

        // 开始一个新路径
        ctx.beginPath();
        ctx.fillStyle = "yellow";
        ctx.moveTo(200,10);
        ctx.lineTo(230,110);
        ctx.lineTo(150,50);
        ctx.lineTo(250,50);
        ctx.lineTo(170,110);
        ctx.closePath();
        ctx.stroke();
        ctx.fill();  

        // 绘制圆形
        ctx.fillStyle = "blue";
        ctx.beginPath();
        ctx.arc(60,180,50,1.5 * Math.PI,Math.PI,true);
        ctx.lineTo(60,180);
        // ctx.stroke();
        ctx.fill();

        // 绘制矩形
        ctx.beginPath();
        ctx.rect(130,130,200,50);
        ctx.fill();

        // 绘制实心矩形
        ctx.fillStyle = "grey";
        ctx.fillRect(350,130,100,50);

        // 绘制空心矩形
        ctx.strokeStyle = "green";
        ctx.strokeRect(500,130,50,50);

        // 绘制文字
        ctx.lineWidth = 1;
        ctx.font = "30px Arial";
        ctx.strokeText("hello，canvas",10,220);
        
        ctx.font = "50px 宋体";
        ctx.fillText("朱万江",10,280);
        
        ctx.font = "50px 黑体";
        ctx.fillText("朱万江",180,280);

        // 清除矩形
        // ctx.clearRect(0,0,800,500);

        
        // 绘制图片必须等图片加载完成才能进行
        window.onload = function(){
            // 绘制图片
            ctx.drawImage(imgs[0],10,300,50,80);
        }
    </script>
</body>
</html>